<template>
  <el-card>
    <div slot="header" :class="$style.header">
      <div :class="$style.search">
        <span>搜索标题：</span>
        <el-input v-model="title" clearable></el-input>
      </div>
      <div>
        <el-button type="primary" @click="filterChange">
          搜索
          <i class="el-icon-search"></i>
        </el-button>
      </div>
      <div>
        <el-button type="primary" @click="add">新增文章</el-button>
      </div>
    </div>

    <el-table :data="tableData" :class="$style.list">
      <el-table-column label="文章标题" width="150">
        <template slot-scope="{ row }">{{row.title}}</template>
      </el-table-column>
      <el-table-column label="文章缩略图" width="150">
        <template slot-scope="{ row }">
          <img :src="row.picurl " style="width:100%;">
        </template>
      </el-table-column>
      <el-table-column label="更新时间" align="center" width="150">
        <template slot-scope="{ row }">{{row.update_time| timeFormat}}</template>
      </el-table-column>
      <el-table-column label="操作" align="right">
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="details(row)">详 情</el-button>
          <el-button type="warning" size="mini" @click="edit(row)">编 辑</el-button>
          <el-button type="danger" size="mini" @click="del(row)">删 除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <BasePagination :max="maxPage" :now.sync="nowPage"></BasePagination>

    <TodoDialog ref="TodoDialog" :item="tableItem"/>
    <AddArticle ref="AddArticle" v-on:addArticle="addArticle"/>

    <TodoDetails ref="TodoDetails" :item="tableItem"/>
  </el-card>
</template>

<script>
import TodoDialog from "./components/TodoDialog";
import TodoDetails from "./components/TodoDetails";
import BasePagination from "@/components/BasePagination";
import AddArticle from "./components/AddArticle";
import { truncate } from "fs";
export default {
  components: {
    TodoDialog,
    TodoDetails,
    BasePagination,
    AddArticle
  },

  data() {
    return {
      tableItem: {},
      tableData: [
        {
          label: "文章标题",
          prop: "title"
        },
        {
          label: "文章缩略图",
          prop: "picurl"
        },
        {
          label: "更新时间",
          prop: "update_time"
        },
        {
          label: "文章简介",
          prop: "summary"
        },
        {
          label: "文章内容",
          prop: "cate-str"
        }
      ],
      title: "",
      maxPage: 1,
      nowPage: 1
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取数据
    getData() {
      this.$http.get("/manage/article/lists",{
        params:{
          paga:this.nowPage,
          rows:10,
          keywords:this.title
        }
      }).then(res => {
        this.tableData = res.data.list;
      });
    },
    filterChange() {
      this.nowPage === 1 ? this.getData() : (this.nowPage = 1)
    },
    handleChange() {},
    // 新增文章逻辑
    add() {
      this.$refs.AddArticle.isDialog = true;
    },
    // 将子组件添加的值返回给this.tableData
    addArticle(data) {
      this.tableData.unshift(data);
    },
    // 文章详情
    details(data) {
      this.$http
        .get("/manage/article/info", {
          params: {
            id: data.id
          }
        })
        .then(res => {
          if (res.code == 1) {
            this.tableItem = res.data.info;
          }
        });
      this.$refs.TodoDetails.isDialog = true;
    },

    // 修改文章
    edit(data) {
      this.tableItem = data;
      this.$refs.TodoDialog.isDialog = true;
    },
    //删除文章
    del(data) {
      this.$confirm("确认删除?", "删除", {
        type: "error"
      })
        .then(() => {
          this.$http
            .post("/manage/article/del", {
              id: data.id
            })
            .then(res => {
              this.getData();
            });
        })
        .catch(() => {});
    },
  }
};
</script>


<style lang="scss" module>
.header {
  display: flex;
  align-items: center;

  > div {
    flex-grow: 0;
    flex-shrink: 0;

    &:not(:last-child) {
      margin-right: 20px;
    }

    &:nth-last-child(2) {
      margin-right: auto;
    }

    > span {
      margin-right: 5px;
    }
  }
}
.search {
  display: flex;
  align-items: center;

  > div {
    width: 200px;
  }
}

[space] {
  flex-grow: 1;
}

.list {
  &:nth-last-child(2) {
    margin-right: auto;
  }
}
</style>
